<template>
	<view class="com-input-number">
		<block v-if="showMinus || internalValue">
			<view class="iconfont icon-jian1" @click="minus"></view>
			<input type="number" :value="internalValue" disabled class="f-input" placeholder=" " @input="changeYear" />
		</block>
		<view class="iconfont icon-tianjia_huaban" @click="plus"></view>
	</view>
</template>

<script>
	export default {
		name: "com-input-number",
		props: {
			value: {
				type: Number,
				default: 0
			},
			showMinus: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				internalValue: 0
			};
		},
		watch: {
			value(val) {
				this.internalValue = this.value
			}
		},
		created() {
			this.internalValue = this.value
		},
		methods: {
			// 减
			minus() {
				if (this.internalValue > 0) {
					this.internalValue--
					this.$emit('input', this.internalValue);
				} else {
					this.$emit('input', 0);
				}
			},
			// 加
			plus() {
				this.internalValue++
				this.$emit('input', this.internalValue);
			},
			changeYear(event) {
				const value = Math.abs(event.detail.value);
				if (isNaN(value)) {
					this.$nextTick(() => {
						this.internalValue = 0;
						this.$forceUpdate()
					})
					this.$emit('input', this.internalValue);
					return
				}
				if (value < 0) {
					this.$nextTick(() => {
						this.internalValue = 0;
						this.$forceUpdate()
					})
				} else {
					this.$nextTick(() => {
						this.internalValue = value
						this.$forceUpdate()
					})
				}
				this.$emit('input', this.internalValue);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com-input-number {
		display: flex;
		align-items: center;
		gap: 8rpx;
		
		.f-input {
			width: 50rpx;
			text-align: center;
			font-size: 28rpx;
			color: #000000;
			flex-shrink: 0;
		}
		
		.iconfont {
			position: relative;
			width: 28rpx;
			height: 28rpx;
			flex-shrink: 0;
			color: #000000;
			font-size: 24rpx;
			border-radius: 50%;
			border: 1px solid #000000;
			
			display: flex;
			align-items: center;
			justify-content: center;
			
			&::after {
				position: absolute;
				content: '';
				top: 50%;
				left: 50%;
				z-index: 99;
				width: 200%;
				height: 200%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		
		.icon-tianjia_huaban {
			font-weight: 600;
		}
	}
</style>